<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>	
<%@page import="com.yaodian100.mall.member.util.UserData"%>
<%@page import="com.yaodian100.core.common.utils.ServerValue"%>
<%@page import="org.apache.commons.lang.StringUtils"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>	
<script type="text/javascript" charset="UTF-8" src="/js/yaodian_zipcode.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.cascade.ext.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.cascade.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.templating.js"></script>
<SCRIPT type="text/javascript" src="/js/jquery-ui.min.js"></SCRIPT> 
<SCRIPT type="text/javascript" src="/js/jquery.tooltip.min.js"></SCRIPT>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.timers-1.2.js"></script>
<style type="text/css">
.phone-area ul{ margin:15px 10px; width:37em;}
.phone-area ul li{ overflow:auto; _zoom:1; line-height:2.5; }
.phone-area ul li span{ display:block; float:left; padding:2px 4px; vertical-align:middle;}
.phone-area ul li.resend{ text-align:right; padding:2px 4px; padding-right:2.8em; *padding-right:1.1em; }
.phone-area ul li.resend input{ width:12em; }
.veri-title{ width:5em; text-align:right; }
.veri-input{ width:21em; }
.veri-input input{ width:20em; padding:2px 3px; *line-height:1.7; }
.veri-button{ width:7em; }
.veri-button input{ padding:0 .75em; *line-height:1.5; }

.veri-flow{ width:450px; *width:445px; margin:10px; padding:10px 5px; background:url(/images/dot_line.gif) left top repeat-x;}
.veri-flow p{ line-height:1.5; margin-bottom:1em; color:#999; }
.part{ background:url(/images/rc_bg.gif) 0 0 no-repeat; position:relative; padding:7px 6px; display:inline-block;}
.part b{ position:absolute; top:0; right:0; background:url(/images/rc_bg_side.gif) 0 0 no-repeat; width:6px; height:32px;}
.no-bg{ background-image:none; font-weight:bold; padding:7px 0;}
.part-arrow{ background:url(/images/rc_arrow.gif) 0 0 no-repeat; width:22px; height:19px; display:inline-block; *line-height:.5;}
.flow-title{ *} 
</style>
<script language="javascript">
var resendTimes = parseInt('${member.mobileModifyCount}');
$().ready(function(){

	$("#crmcheckdialog").dialog({
		autoOpen: false,
		bgiframe: true,
		width: 380,
		height: 'auto',
		modal: true,
		resizable: false 
	});

	$("#crmClose").click(function(){
		$("#crmcheckdialog").dialog('close');
	});
	
      if ($.browser.msie && $.browser.version ==6) {
      	$("#dialog").removeClass('voucher-area');
      }else{
    	  $("#dialog").addClass('voucher-area');
      }
	$("#dialog").dialog({
		bgiframe: true,
		width: 500,
		height: 'auto',
		modal: true,
		resizable: false 
	});
	$("#mobilv").numeric();

	if($("#mobilv").val()==''){
		$("#mobilv").val("请输入需要验证的手机号码").css("color","#aaa")};

	$("#mobilv").focus(function(){
		if($("#mobilv").val()=='请输入需要验证的手机号码'){
		$("#mobilv").val("").css("color","#000")};
	}).blur(function(){
		if($("#mobilv").val()==''){
		$("#mobilv").val("请输入需要验证的手机号码").css("color","#aaa")}else{
			$("#mobilTip").hide();
			$("#ccodeTip").hide();
		};
	});
	
	if($("#comcode").val()==''){
		$("#comcode").val("请输入您收到的验证码").css("color","#aaa")};

	$("#comcode").focus(function(){
		if($("#comcode").val()=='请输入您收到的验证码'){
		$("#comcode").val("").css("color","#000")};
	}).blur(function(){
		if($("#comcode").val()==''){
		$("#comcode").val("请输入您收到的验证码").css("color","#aaa")}else{$("#mobilTip").hide();$("#ccodeTip").hide();};
	});
	
	if("${actionResult}" == "resend_success"){
		$("#sdialog").dialog('open');
	}else if("${actionResult}" == "mobile_exist"){
		$("#smsg").text('发送简讯失败');
		$("#sdialog").dialog('open');
	}else if("${actionResult}" == "ccode_error"){
		$("#ccodeTip").text('校验码无效');
		$("#ccodeTip").show();
	}
	$("#countdown").hide();			
	$('#resend').click(function(){
		//重发
		$("#mobilTip").hide();
		if(isNaN(parseInt(trim($("#mobilv").val()), 10))==true && trim($("#mobilv").val()) !=""){
			$("#mobilTip").text('手机号码请使用半角数字');
			$("#mobilTip").show();
			return;
		}
		if($("#mobilv").val().length==0){
			$("#mobilTip").text('请输入手机号码');
			$("#mobilTip").show();
			return;
		}else{
				$.post("<%=ServerValue.getFrontContextPath()%>/regMobile.do",
			      {mobile:$("#mobilv").val()},
			      function callback(result){
					      if(result!=''){
					    	  alert(result);
					      }else{
					    	  $('#resend').val('已重发校验码');
					      }   
				      },
			      "json");
		}
	});
	
	$("#mobileInput").click(function() {
		$("#mobilTip").hide();		
		if($("#mobilv").val()=='请输入需要验证的手机号码'){
			$("#mobilTip").text('请输入手机号码');
			$("#mobilTip").show();
			return;
		}else if($("#mobilv").val().length!=11){
			$("#mobilTip").text('手机号码格式错误');
			$("#mobilTip").show();
			return;
		}else if(isNaN(parseInt(trim($("#mobilv").val()), 10))==true && trim($("#mobilv").val()) !=""){
			$("#mobilTip").text('手机号码请使用半角数字');
			$("#mobilTip").show();
			return;
		}else{
			$("#countdown").hide();
			$.post("<%=ServerValue.getFrontContextPath()%>/regMobile.do",
				      {mobile:$("#mobilv").val()},
				      function callback(result){
						      if(result!=''){
						    	  $('body').stopTime();
						    	  $("#mobilTip").html(result);
								  $("#mobilTip").show();
						      }else{
						    	  resendTimes++;
						    	  countDown();
							  }   
					      },
				      "json");
			if(resendTimes>=3){
	    		  $("#crmInfo").show();
		    }
		}      
	});
	$("#submitDialog").click(function(){
		$("#ccodeTip").hide();
		if($("#comcode").val()=='请输入您收到的验证码'){
			$("#ccodeTip").text('请输入您收到的验证码');
			$("#ccodeTip").show();
			return;
		}else{
			$.post("<%=ServerValue.getFrontContextPath()%>/jsonCheckActivateMobileCode.do",{memberId:'${member.memberId}',ccode:$("#comcode").val()},
					function callback(result){
						if(result!=''){
							$("#ccodeTip").text('校验码错误');
							$("#ccodeTip").show();
						}else{
							codeOk();
						}
					},
					"json");	
		}
	});

	$("#goCrmCheck").click(function(){
		$.post("<%=ServerValue.getFrontContextPath()%>/jsonCrmCheckMobile.do",{memberId:'${member.memberId}',from:'2'},
				function callback(result){
					if(result=='empty'){
						alert('您目前无待验证手机');
					}else if(result!=''){
						$("#crmMobile").text(result.split(",")[0]);
						$("#questionId").text(result.split(",")[1]);
						closeDialog();
						$("#crmcheckdialog").dialog('open');
					}
				},
				"json");
	});
});
//去除字串左邊的空白虛格
function ltrim(instr){
return instr.replace(/^[\s]*/gi,"");
}

//去除字串右邊的空白虛格
function rtrim(instr){
return instr.replace(/[\s]*$/gi,"");
}

//去除字串前後的空白虛格
function trim(instr){
instr = ltrim(instr);
instr = rtrim(instr);
return instr;
}
function countDown(){
	$("#countdown").show();
	var left = 30;
	if(parseInt('${member.mobileModifyCount}')<10){
		$('body').stopTime();
		$('body').everyTime('1s',function(){
			if(left==0){
				$('body').stopTime ();
				$('#resend').removeAttr('disabled');
				$('#resend').val('点此重发校验码');
				return;
			}
			$('#resend').val('请于'+left+'秒后点此重发');
			left--;
		});
	}else{
		$('#resend').val('点此重发校验码');
	}
}
function codeOk(){
	$.post("<%=ServerValue.getFrontContextPath()%>/activeMobile.do",
		      {ccode:$("#comcode").val()},
		      function callback(result){
				if(result==''){
					$("#ismobileVaild").val("true");
					closeDialog();
					if ( null != $('#tuangouId').val() && "" != $("#tuangouId").val() ){
						alert("请点选提交订单");
					}
					if ($('input[id=paytypeCash]').is(":checked") == true){
						serviceSupportMessage("20");
					}
					if ($('input[id=paytypePos]').is(":checked") == true){
						serviceSupportMessage("30");
					}
				}else{
					alert(result);
					closeDialog();
					alert('请使用网上支付');
					if ($('input[id=paytypeCash]').is(":checked") == true){
						serviceSupportMessage("20");
					}
					if ($('input[id=paytypePos]').is(":checked") == true){
						serviceSupportMessage("30");
					}
				}
		      },
		      "json");
}
</script>
			 
			    
<div id="dialog" title="手机验证" class="phone-area">

<ul>
    <li>
    <span class="veri-title">手机号码：</span>
    <span class="veri-input"><input class="txt-gy" type="text" id="mobilv" maxlength="11" size="30" value=""/></span>

    <span class="veri-button"> <input name="按鈕" type="button" value="获取短信" id="mobileInput" onFocus="blur()"/>
			              </span><span style="display:block"><span class="msg rn" style="display:none" id="mobilTip"></span></span>
    </li>
    <li>
    <span class="veri-title">校验码：</span>
    <span class="veri-input"><input class="txt-gy" type="text" id="comcode" maxlength="8" size="30" value=""/></span>
    <span class="veri-button"> <input name="按鈕" type="button" value="確认提交" id="submitDialog" onFocus="blur()"/>
			             </span> <span style="display:block"><span class="msg rn" style="display:none" id="ccodeTip">校验码无效</span></span>
    </li>
    <div>
   	 <li class="resend" style="text-align:left;display:none" id="countdown" >如果您在30秒内没有收到校验码，<input type="submit" name="button" id="resend" value="请于30秒后点此重发" class="btn-reg-phone"  disabled="disabled"/><c:if test="${member.mobileModifyCount >= 10}">(已达使用次数上限)</c:if></li>
   	 <li class="resend" style="text-align:left;line-height:1.75;<c-rt:if test="${member.mobileModifyCount < 3 || empty member.tempMobile}">display:none</c-rt:if>" id="crmInfo">收不到短信？您还可以&nbsp;<input type="button" value="点击请求客服人工验证" id="goCrmCheck"/></li>
	</div> 
</ul>

 <div class="veri-flow">
    <p>亲，为确保我们能及时联系到您并提供更贴心的服务，您的手机号码需要<br />一次短信验证哦！首次验证成功之后，再次购买将无需验证。<br />
   <strong>温馨提醒：</strong>手机验证过程中若提示该手机已绑定，如您确认此为常用帐户，<br />请致电4001-168-100与客服人员确认基本资料后，为您解除该手机号与其他<br />帐户的绑定，并将该手机号与此帐号绑定。</p>
	<p>
        <span class="part no-bg">验证流程：</span>
        <span class="part">输入手机号码<b>&nbsp;</b></span>
        <span class="part-arrow">&nbsp;</span>

        <span class="part">获取短信<b>&nbsp;</b></span>
        <span class="part-arrow">&nbsp;</span>
        <span class="part">输入校验码<b>&nbsp;</b></span>
        <span class="part-arrow">&nbsp;</span>
        <span class="part">确认提交<b>&nbsp;</b></span>
    </p>
    </div>
</div>	
<div id="crmcheckdialog" title="手机验证" class="phone-area dailog-ok" style="display:none;">
	<p>您已请求客服人工验证<br />联络手机号码：<span class="txt-rd" id="crmMobile"></span><br />请保持接听畅通，我们会在24小时内联络上述号码。<br />您也可致电4001-168-100，请客服人工验证，案件编<br />号：<span class="txt-rd" id="questionId"></span>。<br />耀点100真心感谢您的支持！</p>
    <div align="center">
         <span style="text-align:center;"><a class="btn-mid" href="javascript:;" id="crmClose">关闭</a></span>
    </div>
</div>		     